/*
 *  Author: 溪风
 *  DateTime:  2019-07-11 13:43:53
 *  Desc: 个人中心-我的优惠券页样式表
 */

.coupon-cont {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 127px 0 4px;
}

.coupon-list {
    margin-top: 35px;
    width: 402px;
    height: 112px;
    background-image: linear-gradient(135deg,
            #2899ff 0%,
            #7cd1ff 100%);
    border-radius: 1px;
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }

    >div {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        display: flex;

        >div:nth-of-type(1) {
            width: 115px;
            height: 100%;
            font-size: 20px;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                font-size: 35px;
                color: #ffffff;

            }

        }

        >div:nth-of-type(2) {
            flex: 1;
            padding-left: 16px;
            padding-right: 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            >p {
                padding-top: 5px;
                font-size: 11px;
                color: #ffffff;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            >p:nth-of-type(1) {
                font-weight: bold;
            }

            >div {
                display: flex;
                justify-content: space-between;
                align-items: center;

                >a {
                    flex: 1;
                    padding-right: 10px;
                    font-size: 8px;
                    color: #ffffff;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }

                >div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 58px;
                    height: 22px;
                    background-color: #ffffff;
                    border-radius: 11px;
                    cursor: pointer;

                    img {
                        width: 10px;
                        height: 10px;
                    }

                    span {
                        padding-left: 5px;
                        font-size: 12px;
                        color: #666666;
                    }
                }
            }
        }
    }
}